<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙之乡伤害计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 核心计算逻辑（从 Python 迁移到 JavaScript）
        function getSuccessLevel(roll, baseValue) {
            const rollClamped = Math.max(1, Math.min(100, roll));
            const fifth = Math.floor(baseValue / 5);
            const half = Math.floor(baseValue / 2);
            const baseFloor = Math.floor(baseValue);
            
            if (rollClamped <= 5) return 3;          // 大成功
            else if (rollClamped <= fifth) return 2;  // 极难成功
            else if (rollClamped <= half) return 1;   // 困难成功
            else if (rollClamped <= baseFloor) return 0; // 普通成功
            else return -1;                           // 失败
        }

        function levelToText(level, baseValue) {
            const fifth = Math.floor(baseValue / 5);
            const half = Math.floor(baseValue / 2);
            const baseFloor = Math.floor(baseValue);
            
            switch(level) {
                case 3: return `大成功(1-5)`;
                case 2: return `极难成功(6-${fifth})`;
                case 1: return `困难成功(${fifth + 1}-${half})`;
                case 0: return `普通成功(${half + 1}-${baseFloor})`;
                default: return `失败(${baseFloor + 1}-100)`;
            }
        }

        function calculateBlockDamage(hitLevel, blockLevel, baseDamage) {
            if (hitLevel === -1) return 0;
            if (blockLevel === -1) return baseDamage;
            
            const diff = blockLevel - hitLevel;
            let reduction = 0.1; // 默认10%减伤
            
            if (diff >= 3) reduction = 1.0;
            else if (diff === 2) reduction = 0.8;
            else if (diff === 1) reduction = 0.5;
            else if (diff === 0) reduction = 0.3;
            
            return baseDamage * (1 - reduction);
        }

        function calculateDodgeDamage(hitLevel, dodgeLevel, baseDamage) {
            if (hitLevel === -1) return 0;
            const diff = dodgeLevel - hitLevel;
            return (diff >= 0 && dodgeLevel !== -1) ? 0 : baseDamage;
        }

        function calculateProbabilities(hitValue, compareValue, isBlock, adjustValue, baseDamage) {
            // 计算命中概率分布
            const hitProbs = {};
            for (let roll = 1; roll <= 100; roll++) {
                const adjustedRoll = roll + adjustValue;
                const level = getSuccessLevel(adjustedRoll, hitValue);
                hitProbs[level] = (hitProbs[level] || 0) + 0.01;
            }
            
            // 计算格挡/闪避概率分布
            const compareProbs = {};
            for (let roll = 1; roll <= 100; roll++) {
                const level = getSuccessLevel(roll, compareValue);
                compareProbs[level] = (compareProbs[level] || 0) + 0.01;
            }
            
            // 计算所有组合的期望伤害
            let total = 0;
            const results = [];
            Object.keys(hitProbs).forEach(hitLevel => {
                Object.keys(compareProbs).forEach(compareLevel => {
                    const hitLvl = parseInt(hitLevel);
                    const cmpLvl = parseInt(compareLevel);
                    const prob = hitProbs[hitLevel] * compareProbs[compareLevel];
                    const damage = isBlock 
                        ? calculateBlockDamage(hitLvl, cmpLvl, baseDamage)
                        : calculateDodgeDamage(hitLvl, cmpLvl, baseDamage);
                    const contribution = damage * prob;
                    total += contribution;
                    
                    results.push({
                        hitLevel: hitLvl,
                        compareLevel: cmpLvl,
                        damage,
                        probability: prob,
                        contribution
                    });
                });
            });
            
            return { results, total };
        }

        // 页面交互逻辑
        function calculate() {
            // 获取输入值
            const hit = parseFloat(document.getElementById('hit').value) || 0;
            const block = parseFloat(document.getElementById('block').value) || 0;
            const dodge = parseFloat(document.getElementById('dodge').value) || 0;
            const adjust = parseFloat(document.getElementById('adjust').value) || 0;
            const damage = parseFloat(document.getElementById('damage').value) || 0;
            
            // 计算四组数据
            const baseBlock = calculateProbabilities(hit, block, true, 0, damage);
            const baseDodge = calculateProbabilities(hit, dodge, false, 0, damage);
            const adjBlock = calculateProbabilities(hit, block, true, adjust, damage);
            const adjDodge = calculateProbabilities(hit, dodge, false, adjust, damage);
            
            // 显示结果
            displayResults('table1', baseBlock.results, baseBlock.total, hit, block, false, adjust);
            displayResults('table2', baseDodge.results, baseDodge.total, hit, dodge, false, adjust);
            displayResults('table3', adjBlock.results, adjBlock.total, hit, block, true, adjust);
            displayResults('table4', adjDodge.results, adjDodge.total, hit, dodge, true, adjust);
            
            // 显示百分比变化
            const blockChange = ((adjBlock.total - baseBlock.total) / baseBlock.total * 100).toFixed(2) + '%';
            const dodgeChange = ((adjDodge.total - baseDodge.total) / baseDodge.total * 100).toFixed(2) + '%';
            document.getElementById('blockChange').textContent = blockChange;
            document.getElementById('dodgeChange').textContent = dodgeChange;
            
            // 高亮变化
            document.getElementById('blockChange').style.color = adjBlock.total > baseBlock.total ? 'green' : 'red';
            document.getElementById('dodgeChange').style.color = adjDodge.total > baseDodge.total ? 'green' : 'red';
        }

        function displayResults(tableId, results, total, hitBase, compareBase, isAdjusted, adjustValue) {
            const table = document.getElementById(tableId);
            // 清空表格
            while (table.rows.length > 1) table.deleteRow(1);
            
            // 添加结果
            results.forEach(item => {
                const row = table.insertRow();
                row.insertCell().textContent = levelToText(item.hitLevel, hitBase) + (isAdjusted ? ` (调整${adjustValue})` : '');
                row.insertCell().textContent = levelToText(item.compareLevel, compareBase);
                row.insertCell().textContent = item.damage.toFixed(2);
                row.insertCell().textContent = (item.probability * 100).toFixed(2) + '%';
                row.insertCell().textContent = item.contribution.toFixed(2);
            });
            
            // 更新总计
            document.getElementById(tableId + 'Total').textContent = `总期望伤害: ${total.toFixed(2)}`;
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .table-responsive {
                overflow-x: auto;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">龙之乡伤害计算器</h1>
            <p class="text-gray-600 mt-2">命中、格挡与闪避伤害计算工具</p>
        </header>

        <!-- 输入区域 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label for="hit" class="block text-gray-700 mb-1">基础命中值</label>
                    <input type="number" id="hit" value="90" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="block" class="block text-gray-700 mb-1">基础格挡值</label>
                    <input type="number" id="block" value="50" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="dodge" class="block text-gray-700 mb-1">基础闪避值</label>
                    <input type="number" id="dodge" value="50" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="adjust" class="block text-gray-700 mb-1">出目调整值</label>
                    <input type="number" id="adjust" value="0" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="damage" class="block text-gray-700 mb-1">基础伤害值</label>
                    <input type="number" id="damage" value="100" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex items-end">
                    <button onclick="calculate()" 
                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        <i class="fa fa-calculator mr-2"></i>计算
                    </button>
                </div>
            </div>
        </div>

        <!-- 变化百分比 -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-8">
            <div class="flex flex-col md:flex-row gap-6">
                <div>
                    <span class="text-gray-700">相对于格挡的伤害变化: </span>
                    <span id="blockChange" class="font-bold">--%</span>
                </div>
                <div>
                    <span class="text-gray-700">相对于闪避的伤害变化: </span>
                    <span id="dodgeChange" class="font-bold">--%</span>
                </div>
            </div>
        </div>

        <!-- 结果表格（响应式布局） -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- 表格1：基础命中 vs 格挡 -->
            <div class="bg-white rounded-lg shadow-md p-4">
                <h3 class="text-lg font-semibold mb-3">1. 基础命中 vs 基础格挡（无调整）</h3>
                <div class="table-responsive">
                    <table id="table1" class="min-w-full border-collapse">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="border border-gray-300 px-2 py-1 text-left">命中等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-left">格挡等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">伤害值</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">概率</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">期望贡献</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 结果将通过JS动态填充 -->
                        </tbody>
                    </table>
                </div>
                <p id="table1Total" class="mt-2 text-right font-medium">总期望伤害: --</p>
            </div>

            <!-- 表格2：基础命中 vs 闪避 -->
            <div class="bg-white rounded-lg shadow-md p-4">
                <h3 class="text-lg font-semibold mb-3">2. 基础命中 vs 基础闪避（无调整）</h3>
                <div class="table-responsive">
                    <table id="table2" class="min-w-full border-collapse">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="border border-gray-300 px-2 py-1 text-left">命中等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-left">闪避等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">伤害值</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">概率</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">期望贡献</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 结果将通过JS动态填充 -->
                        </tbody>
                    </table>
                </div>
                <p id="table2Total" class="mt-2 text-right font-medium">总期望伤害: --</p>
            </div>

            <!-- 表格3：调整后命中 vs 格挡 -->
            <div class="bg-white rounded-lg shadow-md p-4">
                <h3 class="text-lg font-semibold mb-3">3. 调整后命中 vs 基础格挡</h3>
                <div class="table-responsive">
                    <table id="table3" class="min-w-full border-collapse">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="border border-gray-300 px-2 py-1 text-left">调整后命中等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-left">格挡等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">伤害值</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">概率</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">期望贡献</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 结果将通过JS动态填充 -->
                        </tbody>
                    </table>
                </div>
                <p id="table3Total" class="mt-2 text-right font-medium">总期望伤害: --</p>
            </div>

            <!-- 表格4：调整后命中 vs 闪避 -->
            <div class="bg-white rounded-lg shadow-md p-4">
                <h3 class="text-lg font-semibold mb-3">4. 调整后命中 vs 基础闪避</h3>
                <div class="table-responsive">
                    <table id="table4" class="min-w-full border-collapse">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="border border-gray-300 px-2 py-1 text-left">调整后命中等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-left">闪避等级</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">伤害值</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">概率</th>
                                <th class="border border-gray-300 px-2 py-1 text-right">期望贡献</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 结果将通过JS动态填充 -->
                        </tbody>
                    </table>
                </div>
                <p id="table4Total" class="mt-2 text-right font-medium">总期望伤害: --</p>
            </div>
        </div>

        <footer class="text-center text-gray-500 text-sm mt-12">
            <p>龙之乡伤害计算器 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>
